<!-- 函数 -->
<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h1 class="text-4xl mb-6">函数</h1>

                <h2 class="mb-5 flex items-center">匿名函数</h2>
                <Codemirror :code="fun1Code" name="匿名函数" class="mb-10" />
                <Codemirror :code="fun2Code" name="匿名箭头函数" class="mb-10" />

                <h2 class="mb-5 flex items-center">声明函数</h2>
                <Codemirror :code="fun3Code" name="声明函数" class="mb-10" />

                <h2 class="mb-5 flex items-center">变量赋值函数</h2>
                <p class="mb-3 text-base">箭头函数只能用赋值式写法，不能用声明式写法,如果参数只有一个，可以不加括号，如果没有参数或者参数多于一个就需要加括号</p>
                <Codemirror :code="fun4Code" name="变量赋值函数" class="mb-10" />

                <h2 class="mb-5 flex items-center">class类</h2>
                <Codemirror :code="fun5Code" name="class类" class="mb-10" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const fun1Code = ref(`(function() {
  console.log('匿名函数')
})()`)

        const fun2Code = ref(`(() => {
    console.log('匿名箭头函数')
})()`)

        const fun3Code = ref(`function Fun1() {
    console.log('普通声明函数')
}

Fun1()`)

        const fun4Code = ref(`var Fun1 = function() {
  console.log('变量赋值函数')
}

Fun1()

var Fun2 = () => {
  console.log('变量赋值箭头函数')
}

Fun2()`)

        const fun5Code = ref(`class Person {
    constructor(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
    }

    sayHi(str) {
        console.log('我是' + this.name + '，今年' + this.age + '岁，性别' + this.sex + '，', str);
        
    }
}

const persons = new Person('豆豆',10,'男')

persons.sayHi('我长大了')`)

        return {
            fun1Code,
            fun2Code,
            fun3Code,
            fun4Code,
            fun5Code,
        }
    }
})
</script>

<style scoped>

</style>